<template>
	<nt-container>
		<view class="check-tabs">
			<view class="check-tabs__item" :class="type===1?'active':''" @tap="changeType(1)">
				求助订单 <text class="count" v-if="countData[1]">{{countData[1]}}</text>
			</view>
			<view class="check-tabs__item " :class="type===2?'active':''" @tap="changeType(2)">
				历史记录 <text class="count" v-if="countData[2]">{{countData[2]}}</text>
			</view>
		</view>
		<u-list class="list" @scrolltolower="getList" @refresherrefresh="refresherrefresh" enableBackToTop
			refresher-enabled :refresher-triggered="isPull" refresher-background="#F2F4F6" refresher-threshold="50"
			height="calc(100% - 90rpx)">
			<view class="card" v-for="(it,index) in listData" :key="index">
				<view class="item">
					<view class="">
						<text class="label">区域：</text>
						{{it.area}}
					</view>
					<view class="">{{it.c_date}}</view>
				</view>
				<view class="item">
					<view>
						<text class="label">求助信息：</text>{{it.name}}
					</view>
				</view>
				<view class="item">
					<view>
						<text class="label">备注信息：</text>{{it.remarks}}
					</view>
				</view>
				<view class="item">
					<view class="">
						<text class="label">单价：</text>
						<text class="cf">{{it.price}}</text>
					</view>
					<view class="">
						<text class="label">佣金：</text>
						<text class="cf">{{it.commission}}</text>
					</view>
				</view>
				<view class="item">
					<view class="">
						<text class="label">求助：</text>
						{{it.create_username}}==
					</view>
					<view class="">
						<text class="label">状态：</text>
						<text class="cf">{{it.status_text}}</text>
					</view>
				</view>
				<view class="item">
					<view class="">
						<text class="label">接单：</text>
						{{it.receiving_username}}==
					</view>
					<view class="">
						{{it.receiving_date }}
					</view>
				</view>
				<view class="button-box">
					<view class="button" v-for="(val, key, index) in it.powerStatus" :key="index" v-if="val===1"
						@tap="openModal(key,it)">
						{{powerStatus[key]}}
					</view>
				</view>
			</view>
		</u-list>

		<view class="add" @tap="nav(`/subpackage/member/pages/resort/release`)">
			<text class="iconfont">&#xeca0;</text>
			新增
		</view>
		<u-modal :show="show" title="温馨提示" :showCancelButton="true" @confirm="confirm" @cancel="show=false"
			:content="content" ref="uModal" :asyncClose="true"> </u-modal>
	</nt-container>
</template>

<script>
	import {
		paramsUrl,
		postPowerStatus,
		getResortCount
	} from '@/api'
	export default {
		async onLoad() {
			this.setHeight()
			await this.getCount()
			await this.getList()
			uni.$on('resortList', async () => {
				this.init()
				await this.getCount()
				await this.getList()
			})
		},
		data() {
			return {
				type: 1,
				isPull: false,
				listData: [],
				params: {
					nav_status: 1,
					page: 1,
					limit: 10,
				},
				isNext: true,
				loading: false,
				// 0全部，1未审核，2已审核
				navStatus: 1,
				powerStatus: {
					postCreate: '修改',
					postOver: '确认完成',
					postQx: '取消',
					postReceiving: '接单',
					postWc: '完成'
				},
				show: false,
				content: "",
				status: '',
				id: '',
				countData: {
					1: '',
					2: ''
				}
			}
		},

		methods: {
			async getCount() {
				const {
					code,
					data: countData
				} = await getResortCount()
				if (code === 1 && countData) {
					this.countData = countData
				}
			},
			async confirm() {
				try {
					const {
						code,
						msg
					} = await postPowerStatus(this.status, {
						id: this.id
					})
					this.show = false
					if (code === 1) {
						this.init()
						await this.getCount()
						await this.getList()
					}
				} catch (e) {
					this.show = false
				}
			},
			async openModal(status, it) {
				if (status === 'postCreate') {
					uni.navigateTo({
						url: `/subpackage/member/pages/resort/release?id=${it.id}`,
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('sendData', it)
						}
					});
					return
				}
				this.status = status
				this.id = it.id
				this.content = `确认${this.powerStatus[status]}吗？`
				this.show = true
			},
			changeType(type) {
				this.type = type
				this.init()
				this.getList()
			},
			setHeight() {
				const that = this
				uni.getSystemInfo({
					success: ({
						windowHeight
					}) => {
						setTimeout(async () => {
							await that.$nextTick()
							uni.createSelectorQuery().selectAll('.list')
								.boundingClientRect(
									res => {
										// 获取列表定位
										that.listHeight = windowHeight - res[0].top
									}).exec()
						})

					}
				})
			},
			refresherrefresh() {
				this.isPull = true
				this.init()
				this.getList()
			},
			async getList() {
				if (!this.isNext) return
				try {
					const {
						code,
						data: {
							data: listData,
							total
						}
					} = await paramsUrl(this.type === 1 ? 'Parts_Goods/getPaginate' : 'Parts_Goods/getOrderPaginate',
						this.params)
					if (code === 1) {
						this.params.page = ++this.params.page
						this.listData = [...this.listData, ...listData]
						this.listData.length >= total ? this.isNext = false : null
					}
					this.isPull = false
				} catch (e) {
					this.isPull = false
				}
			},
			init() {
				this.listData = []
				this.params.page = 1
				this.params.limit = 10
				this.isNext = true;
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 20rpx;
		box-sizing: border-box;
	}

	.card {
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.03);
		margin: 0 20rpx 20rpx;
	}

	.item {
		padding: 5px 0;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
	}

	.label {
		color: #999;
	}

	.button-box {
		display: flex;

		.button {
			padding: 0 20rpx;
			background: var(--theme-color);
			color: #fff;
			font-size: 26rpx;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			width: 20%;
			margin-top: 20rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.cf {
		color: #f00
	}

	.theme {
		color: var(--theme-color)
	}

	.check-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		margin: 20rpx;
		background: #fff;

		&__item {
			flex: 1;
			text-align: center;
			color: #666;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.active {
				background: var(--theme-color);
				color: #fff;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1rpx;
				background: #f5f5f5
			}
		}
	}

	.count {
		width: 40rpx;
		color: #fff;
		border-radius: 50%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 20rpx;
		background: #f00;
		margin-left: 10rpx;
	}

	.add {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #666;
		position: fixed;
		right: 20rpx;
		bottom: 160rpx;

		.iconfont {
			transform: rotate(45deg);
			margin-bottom: 4rpx;
			font-size: 28rpx;
		}
	}
</style>